<template>
	<view style="width: 100%;">
		<u-popup :safeAreaInsetBottom='false' :show="show" mode="center" @close="close" @open="open">
			<view>
				<up-qrcode @result='result' val="uview-plus"></up-qrcode>
			</view>
		</u-popup>
		<!-- 		<view class="close" @click="close" v-if="show">
			<u-icon color='white' name="close" size='40rpx'></u-icon>

		</view> -->
		<view class="save" @click="save">
			<up-button v-if="show" iconColor='#524630' color="#F3E0BB" shape="circle" icon="arrow-downward"
				text="保存到相册"></up-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// width: uni.getSystemInfoSync().screenWidth * 0.8 + 'px',
				show: false,
				ewmLink: ''
			}
		},
		watch: {
			show: {
				handler(e) {
					if (e) {
						setTimeout(() => {
							// this.$refs.uqrcode.templateOptions.width = uni.upx2px(400)
						})
					}
				}
			}
		},
		onShow() {

		},
		methods: {
			save() {
				uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
					filePath: this.ewmLink, //图片文件路径
					success: function() {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none',
						});
					},
					fail: function(e) {
						console.log(e);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none',
						});
					}
				});
			},
			open() {
				// console.log('open');
			},
			close() {

				this.show = false
				// console.log('close');
			},
			result(e) {
				this.ewmLink = e
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		padding-bottom: 30rpx;
	}


	// .content {
	// 	position: relative;

	// 	.status {
	// 		font-size: 28rpx;
	// 		display: flex;
	// 		align-items: center;

	// 		.left {
	// 			display: flex;
	// 			flex-direction: column;
	// 			align-items: center;
	// 			justify-content: center;

	// 			.circle {
	// 				border: 1px solid;
	// 				border-radius: 50%;
	// 				background-color: #549CFE;
	// 				color: black;
	// 				width: 64rpx;
	// 				height: 64rpx;
	// 				position: relative;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: center;
	// 			}



	// 		}

	// 		.right {

	// 			padding-left: 16rpx;
	// 		}

	// 		// .main_:not(:last-child)
	// 		.right {
	// 			// height: 124rpx;
	// 			position: relative;

	// 		}
	// 	}


	// }
	.save {
		position: absolute;
		bottom: 130rpx;
		// border: 1px solid #fff;
		// border-radius: 50%;
		/* width: 200rpx; */
		z-index: 999999;
		width: 296rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);



	}

	::v-deep.u-button__text {
		color: #524630 !important;
	}

	.close {
		position: absolute;
		bottom: 130rpx;
		border: 1px solid #fff;
		border-radius: 50%;
		/* width: 200rpx; */
		z-index: 999999;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 50%;
		transform: translateX(-50%);
	}
</style>